<template>
  <div class="home">
    <div class="header">
      <Header @search="search"></Header>
    </div>
    <div class="content">
      <div class="tabbar">
        <el-tabs @tab-click="handleClick($event)">
          <el-tab-pane
            v-for="item in newsType"
            :key="item.id"
            :label="item.title"
            :name="item.id.toString()"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="container">
        <div class="container-water-fall">
          <waterfall
            ref="waterfall"
            :col="col"
            :width="itemWidth"
            :gutterWidth="gutterWidth"
            :data="newsList"
            @loadmore="loadmore"
          >
            <template>
              <div class="cell-item" v-for="item in newsList" :key="item.id">
                <img
                  v-if="item.cover_one"
                  :src="item.cover_one"
                  alt="加载错误"
                  @click="goDetail(item)"
                />
                <div class="item-body">
                  <div class="item-desc" @click="goDetail(item)">
                    {{ item.title }}
                  </div>
                  <div class="item-footer">
                    <div
                      @click="gotoInfo(item)"
                      class="avatar"
                      :style="{ backgroundImage: `url(${item.pic})` }"
                    ></div>
                    <div class="name">{{ item.name }}</div>
                    <div
                      @click="onhandleLike(item)"
                      class="like"
                      :class="item.liked ? 'active' : ''"
                    >
                      <i
                        class="icon-fabulous"
                        v-show="item.isZan === 1"
                        style="color: red"
                      ></i>
                      <i
                        class="icon-fabulous"
                        v-show="item.isZan === 0"
                        style="color: #333"
                      ></i>
                      <div class="like-total">{{ item.dz }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </waterfall>
        </div>
      </div>
    </div>
    <div class="load" v-show="noload">
      没有更多了
    </div>
    <Footer></Footer>
 
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Footer from "../components/Footer.vue";
export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      searchName: "",
      navList: [
        {
          id: 1,
          title: "社区精选",
          name: "Home",
        },
        {
          id: 2,
          title: "发布笔记",
          name: "Release",
        },
        {
          id: 3,
          title: "关于婚呀",
          name: "About",
        },
        {
          id: 4,
          title: "联系客服",
          name: "Contact",
        },
      ],
      current: 0,
      activeName: 0,
      imgList: [],
      col: 5,

      newsType: [
        {
          id: "0",
          title: "推荐",
        },
      ],
      page: 1,
      tabType: 0,
      newsList: [],
      uid: "",
      userinfo: "",
      isZan: "",
      noload:false,
      footList: [
        {
          id: 2,
          title: "关于婚呀",
          name: "About",
        },
         {
          id: 2,
          title: "联系我们",
          name: "About",
        },
         {
          id: 2,
          title: "商家合作",
          name: "About",
        },
            {
          id: 2,
          title: "异业联盟",
          name: "About",
        },
       
         {
          id: 2,
          title: "免责声明",
          name: "About",
        },
          {
          id: 2,
          title: "商标声明",
          name: "About",
        },
            {
          id: 2,
          title: "资本合作",
          name: "About",
        },
        {
          id: 2,
          title: "加入婚呀",
          name: "Contact",
        },
      ],
    };
  },
  computed: {
    /*
  注意:
  1. gutterWidth需要与width一起使用才会生效，否则会进行自适应宽度(使用rem布局时，需先计算出自适应后的宽度再传值)
  2. 使用了`waterfall`的父组件,如果样式存在问题，可去掉css `scoped`尝试一下
*/
    itemWidth() {
      return 138 * 0.5 * (document.documentElement.clientWidth / 450); // #rem布局 计算宽度
    },
    gutterWidth() {
      return 9 * 0.5 * (document.documentElement.clientWidth / 368); //#rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
    },
  },
  created() {
    this.getNewsTypes();
    // this.$nextTick(()=>{
    //   this.getNewsTypes();
    // })
  },
  mounted() {
    this.getList();
    this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
  },
  watch: {},
  methods: {
    // scroll(scrollData) {
    //   console.log(scrollData);
    // },
    switchCol(col) {
      this.col = col;
      console.log(this.col);
    },
    loadmore() {
      this.page++;
      this.getList();
    },
    max() {},
    change(index) {
      this.page = 1;
      this.current = index;
    },
    handleClick(e) {
      console.log("index", e.index);
      this.tabType = e.index;
      this.newsList = [];
      this.$nextTick(() => {
        this.getList();
      });
    },
    // 获取文章类型
    getNewsTypes() {
      this.$axios
        .get("getNewsTypes")
        .then((res) => {
          //  console.log(res,'res')
          if (res.code === 1) {
            let newsType = this.newsType.concat(res.data);
            this.newsType = newsType.splice(0);
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    // 获取文章列表
    getList() {
      let params = {
        token: "",
        type: this.tabType,
        keyword: this.searchName,
        page: this.page,
      };
      this.$axios
        .get("/getNewsList", { params })
        .then((res) => {
          // console.log("reslist", res);
          if (this.page === 1) {
            this.newsList = [];
            setTimeout(() => {
              this.newsList = res.data;
            }, 500);
          } else {
            this.newsList = this.newsList.concat(res.data);

          }
          if(res.data.length==0){
            // this.noload=true
          }
        
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    goDetail(item) {
      this.$router.push({
        name: "Detail",
        query: {
          id: item.id,
        },
      });
    },
    search(val) {
      console.log("val", val);
    },
    // 查看资料
    gotoInfo(item) {
      this.$router.push({
        name: "userCenter",
        query: {
          uid: item.uid,
        },
      });
    },
    // 点赞
    onhandleLike(item) {
      if (this.userinfo) {
        if (item.isZan === 0) {
          var isDo = 2;
        } else if (item.isZan === 1) {
          isDo = 1;
        }
        let params = {
          type: 1,
          doWhat: isDo,
          isNews: 1,
          nid: item.id,
        };
        this.$axios
          .post("newsDo", params)
          .then((res) => {
            if (item.isZan === 0) {
              item.isZan = 1;
              item.dz = item.dz + 1;
            } else {
              item.isZan = 0;
              item.dz = item.dz - 1;
            }
            this.$message.success(res.msg);
            console.log("item.isZan", item.isZan);
           
          })
          .catch((err) => {
            console.log("err", err);
          });
      } else {
        this.$confirm("您还未登录, 是否登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            //点击确定的操作(调用接口)
            this.$router.push({ name: "Login" });
          })
          .catch(() => {
            //几点取消的提示
          });

        return false;
      }
    },
  },
};
</script>
<style>
</style>
<style lang="less" scoped>
.flex {
  display: flex;
}

.home {
  width: 100%;
  height: 100%;

  .content {
    background: #f4f4f4;
    margin-bottom: 40px;
    .tabbar {
      width: 1200px;
      height: 50px;
      font-size: 20px;
      color: #333333;
      margin: 24px auto;
      background: #fff;
      padding-left: 50px;
      /deep/ .el-tabs__nav-wrap::after {
        height: 0px;
      }
      /deep/.el-tabs__item.is-active {
        color: #f54b64;
      }
      /deep/.el-tabs__active-bar {
        background: #f54b64;
      }
    }
  }
  .container {
    width: 1260px;
    margin: 0 auto;
    .container-water-fall {
      // padding: 0 28px;
      // width: 100vw;

      box-sizing: border-box;
      h4 {
        padding-top: 56px;
        padding-bottom: 28px;
        font-family: PingFangSC-Medium;
        font-size: 36px;
        color: #000000;
        letter-spacing: 1px;
        text-align: justify;
      }
      button {
        background-color: #ff0;
        color: #24292e;
        border: 1px solid rgba(27, 31, 35, 0.2);
        border-radius: 0.25em;
        width: 100px;
        line-height: 26px;
        font-size: 13px;
        margin: 4px 0;
        margin-right: 4px;
        cursor: pointer;
        outline: none;
        &.blue-light {
          background: #27fbc2;
        }
      }
      button:hover {
        background-image: linear-gradient(-180deg, #fafbfc, #ccc 90%);
      }
    
      // .cell-item:hover{
      //   opacity: .3;
      //   transition: opacity .7s ease;
      // }
      .cell-item {
        width: 100%;
        margin-bottom: 10px;
        position: relative;
        background: #ffffff;
        border: 2px solid #f0f0f0;
        border-radius: 12px 12px 12px 12px;
        overflow: hidden;
        box-sizing: border-box;
        img {
          // border-radius: 12px 12px 0 0;
          width: 100%;
          height: auto;
          display: block;
          cursor: pointer;
        }
        .name {
          width: 85px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .item-body {
          // border: 1px solid #F0F0F0;
          padding: 12px;
          .item-desc {
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 15px;
            color: #333333;
            line-height: 18px;
            font-weight: bold;
            cursor: pointer;
          }
          .item-footer {
            margin-top: 22px;
            position: relative;
            display: flex;
            align-items: center;
            .avatar {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              background-repeat: no-repeat;
              background-size: contain;
              cursor: pointer;
            }
            .name {
              max-width: 150px;
              margin-left: 10px;
              font-size: 14px;
              color: #999999;
            }
            .like {
              position: absolute;
              right: 0;
              display: flex;
              align-items: center;
              cursor: pointer;
              &.active {
                i {
                }
                .like-total {
                  color: #ff4479;
                }
              }
              i {
                width: 28px;
                display: block;
              }
              .like-total {
                margin-left: 10px;
                font-size: 12px;
                color: #999999;
              }
            }
          }
        }
      }
    .cell-item :hover:after {
    width: 100%;
    height: 100%;
    background-color: rgba(0,2,4,.2);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 12px 12px 12px 12px;
    overflow: hidden;
    box-sizing: border-box;
    content: "";
    pointer-events: none;
}
    }
    // .githubdata{
    //   float: right;
    //   margin-right: 90px;
    //   img{
    //     width: 14px;
    //     // height: 16px;
    //   }
    // }
  }
}
header {
  width: 100%;
  background: #fff;
  .head {
    max-width: 1200px;
    display: flex;

    height: 100px;
    align-items: center;
    justify-content: space-between;
    padding-left: 178px;
    padding-right: 178px;
    .logo {
      width: 82px;
      height: 40px;
      background: red;
      margin-right: 80px;
    }
    .nav {
      display: flex;
      align-items: center;
      li {
        width: 100px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 25px;
        margin-right: 40px;
        font-size: 20px;
        a {
          color: #f54b64;
        }
      }
      .bgColors {
        background-image: linear-gradient(219deg, #f78361 3%, #f54b64 100%);
        a {
          color: #fff;
        }
      }
    }
    .user {
      display: flex;
      align-items: center;
      .username {
        margin-right: 10px;
      }
    }
  }
}
.foot {
  background: #262626;
  padding: 47px 0 24px;
  color: #cecece;
  width: 100%;
  .sw {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px;
    table {
      width: 100%;
      text-align: center;
      margin-bottom: 22px;
      .icp {
        color: #cecece;
        text-align: center;
        line-height: 20px;
        a {
          color: #ffffff !important;
        }
        .code {
          padding: 6px;
          border: 1px solid #575757;
          width: 150px;
        }
      }
      table .borderNone ul {
        border-right: none;
      }
      .phonetul {
        line-height: 40px;
      }
    }
  }
  .footul {
    display:flex;
    justify-content: center;
  }
  .footul li{
    margin: 10px 20px;
  }
}
</style>
